<template>
	<view>
		<u-sticky offset-top="0" customNavHeight="0">
			<view class="utabs">
				<u-tabs :list="list1" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					lineColor="#333" @click="click"></u-tabs>
			</view>
		</u-sticky>

		<view class="lists" @click="toUrl('details')">
			<text class="list_txt">订单编号：3246576857564654</text>
			<text class="list_txt">订单时间：2024-11-11 12:43:12</text>
			<text class="list_txt">购买数量：3</text>
			<text class="already">已释放 2 次</text>
		</view>
		<view class="lists">
			<text class="list_txt">订单编号：3246576857564654</text>
			<text class="list_txt">订单时间：2024-11-11 12:43:12</text>
			<text class="list_txt">购买数量：3</text>
			<text class="already">已释放 2 次</text>
		</view>
		<view class="lists">
			<text class="list_txt">订单编号：3246576857564654</text>
			<text class="list_txt">订单时间：2024-11-11 12:43:12</text>
			<text class="list_txt">购买数量：3</text>
			<text class="already">已释放 2 次</text>
		</view>

		<u-empty mode="list" text="暂无相关内容"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '进行中(2)',
				}, {
					name: '已完成',
				}],
				current: 0
			}
		},
		methods: {
			click(e) {
				this.current = e.index;
				this.$pop.pageScrollTo();
			}
		},
		computed: {
			inactiveStyle() {
				return {
					color: '#333',
					fontSize: '28rpx'
				}
			},
			activeStyle() {
				return {
					color: '#000',
					fontSize: '30rpx'
				}
			}
		}

	}
</script>
<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.utabs {
		width: 100%;
		padding: 0 30rpx;
		background-color: $page;
	}

	.lists {
		width: 690rpx;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		position: relative;
		display: flex;
		flex-direction: column;

		.list_txt {
			color: #333;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.already {
			color: #000;
			font-size: 30rpx;
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}
	}
</style>